<template>
  <div>
        <el-row>
      <el-col :xs="24" :md="24" :lg="24" style="margin-bottom: 20px;">
        <el-card shadow>
          <el-date-picker v-model="findDate" @on-change="setOrderCountSearchDate" type="daterange" split-panels placeholder="选择查询周期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 300px" />
            <span style="margin-left: 15px;">待付款: {{waitPay}}</span>
            <span style="margin-left: 15px;">已支付: {{paySuccess}}</span>
            <span style="margin-left: 15px;">待发货: {{waitDeliver}}</span>
          <MultipleLineEcharts ref="multipleLineEcharts" style="height: 300px; margin-top: 10px;" :xAxisData="multipleLineXAxisData" :seriesDataArray="multipleLineSeriesDataArray" :legend="legend" :text="multipleLineTitle" :titleName="multipleLineTitleName"/>
        </el-card>
      </el-col>
        </el-row>
  </div>
</template>

<script>
import {getDate, doPostJson, doPostQs} from '@/utils/utils'
import MultipleLineEcharts from './MultipleLineEcharts.vue'
import * as ResponseStatus from '@/utils/response-status'

export default {
  name: 'OrderEcharts',
  components: {
    MultipleLineEcharts
  },
  data() {
    return {
      multipleLineTitleName: '每日订单统计',
      multipleLineTitle: '订单量统计',
      multipleLineXAxisData: '订单统计',
      multipleLineSeriesDataArray: [],
      legend:[],
      findDate:[],
      multipleLineBeginDate: '',
      multipleLineEndDate: '',
      waitPay: 0,
      paySuccess: 0,
      waitDeliver: 0,
    }
  },
  mounted() {
    this.initMultipleLineData()
  },
  methods: {
    initMultipleLineData() {
      var currDate = new Date()
      // 初始化订单量数据
      if (this.multipleLineBeginDate === '') {
        this.multipleLineBeginDate = getDate(currDate,-6)
      }
      if (this.multipleLineEndDate === '') {
        this.multipleLineEndDate = getDate(currDate,0)
      }
      const params = {
        beginDateStr: this.multipleLineBeginDate,
        endDateStr: this.multipleLineEndDate
      }
     this.findDate= [this.multipleLineBeginDate,this.multipleLineEndDate]
     doPostQs('/mall-stat/goods-order-by-date-status', params, {})
        .then(res => {
          const data = res
            this.multipleLineTitle = data.message
            this.multipleLineXAxisData = data.data[0].xAxisData
            this.multipleLineSeriesDataArray = data.data[0].seriesDataArray
            this.legend = data.data[0].legend
            this.waitPay = data.data[1]
            this.paySuccess = data.data[2]
            this.waitDeliver = data.data[3]
            this.$refs.multipleLineEcharts.initData()
        })
        .catch(err => {
          this.$message.error(err)
        })
    },
    setOrderCountSearchDate(time) {
      const date = time.toString().split(",")
      this.multipleLineBeginDate = date[0]
      this.multipleLineEndDate = date[1]
      this.initMultipleLineData()
    }
  }
}
</script>

<style lang="less">
</style>
